<template>
	<u-picker :show="show" ref="uPickerRef" :columns="columns" @confirm="confirm" @cancel="close" @change="changeHandler"
		:closeOnClickOverlay="closeOnClickOverlay" ></u-picker>
</template>

<script setup>
import {
	province,
	city,
	county,
	arrrr
} from './city.js'
import { ref, reactive } from 'vue';

const props = defineProps({
	show: {
		type: Boolean,
		default: false
	},
	confirmArea: {
		type: String,
	},
	closeOnClickOverlay: {
		type: Boolean,
		default: false,
	},
	closeArea:{
		type: Boolean,
		default: false
	}
})
const emits = defineEmits(['confirmArea', 'closeArea']);
const loading = ref(false)
const cshow = ref(false)
const columns = ref([
	province,
	city[0],
	county[0][0]
])
const secondColumnData = ref(city)
const thirdColumnData = ref(county)
const uPickerRef = ref(null)
const changeHandler = (e) => {
	const {
		columnIndex,
		value,
		values, // values为当前变化列的数组内容
		index,
		indexs,
		picker
	} = e
	if (columnIndex === 0) {
		uPickerRef.value.setColumnValues(1, secondColumnData.value[index])
		uPickerRef.value.setColumnValues(2, thirdColumnData.value[index][0])
	}
	if (columnIndex === 1) {
		uPickerRef.value.setColumnValues(2, thirdColumnData.value[indexs[0]][index])
	}

}
// 回调参数为包含columnIndex、value、values
const confirm = (e) => {
	emits("confirmArea", e.value)
}
const close = () => {
	emits('closeArea')
}

</script>
<style>
:deep(.u-fade-leave-active) {
  transition-property: opacity;
  z-index: 999 !important;
}
</style>